<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<el-button type="primary" plain  @click="customSearch"class="el-icon-plus" size="small">自定义查询</el-button>
			<el-button plain @click="search()" class="el-icon-search" size="small">刷新</el-button>
			<div style="color: red;font-size: small;margin-top: 10px;">{{tipMsg}}</div>
		</div>
		<el-table :data="tableData" border v-loading="loading">
		  <el-table-column fixed="left" v-if="tableLabel[0]" label="序号" type="index" width="50"></el-table-column>
		  <el-table-column fixed="left" v-if="tableLabel[0]" :prop="tableLabel[0]" :label="tableLabel[0]" width="210"></el-table-column>
		  <el-table-column v-for="(data, index) in tableLabel.slice(1)" :key="index" :prop="data" :label="data" min-width="120"></el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 50,100]" 
			:page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total" 
			style="margin-top: 10px;float: right">
		</el-pagination>
	</el-card>
</template>

<script>
	import taos from '../../api/taosrestful'
	import {mapGetters} from 'vuex'
	import bus from '../../utils/bus'
	
	export default {
		name:'search_stable',
		data() {
			return {
				loading:true,
				tableName:'',
				dbName:'',
				payload:'',
				page: 1,
				limit:10,
				total:0,
				tableData:[],
				tableLabel:[],
				tipMsg:''
			}
		},
		computed: {
			...mapGetters(['curObject'])
		},
		created() {
			this.init()
			this.search()
		},
		props: {
		    objId:''
		},
		methods: {
			init(){
				let tmpStable = JSON.parse(localStorage.getItem(this.objId))
				if(!tmpStable){
					this.$message({message: '请输入超表的表名',type: 'error',duration: 1000})
					return
				}
				
				let link = this.curObject.link
				this.payload = {ip: link.host,port: link.port,user: link.user,password: link.password}
				this.tableName = tmpStable.name
				this.dbName = this.curObject.dbName
			},
			handleSizeChange(val) {
				this.limit = val
				this.search()
			},
			handleCurrentChange(val) {
				this.page = val
				this.search()
			},
			search(){
				this.tableData = []
				this.tableLabel = []
				this.loading = true
				taos.selectStableData(this.dbName,this.tableName,this.page,this.limit,this.payload).then(data =>{
					this.loading = false
					if(data.res){
						if(data.data.length > 0){
							this.tableLabel = Object.keys(data.data[0])
							this.tableData = data.data
							if(data.orderBy=='asc'){
								this.tipMsg = '由于表中数据超过50万，暂时不支持排序，采用默认顺序'
							}
						}else{
							this.tableLabel = []
							this.tableData = []
							this.page=1
							this.limit=10
						}
						this.total = data.count
					}else{
						this.$message({message: data.msg,type: 'error',duration:1000})
					}
				})
			},
			//自定义查询
			customSearch(){
				let action = 'sqlSearch'
				bus.$emit('addTab', '自定义查询', new Date().getTime(), action)
			}
		}
	}
</script>